<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html学习1</title>
</head>

<body>
    <!-- html的注释在vscode：ctrl + / -->

    <!-- 这是标题标签 <h1-6>
         字体按数字变大而变小和细
    -->
    <h1>这是标题1</h1>
    <h2>这是标题2</h2>
    <h3>这是标题3</h3>
    <h4>这是标题4</h4>
    <h5>这是标题5</h5>
    <h6>这是标题6</h6>

    <!-- p是段落标签
        在<p>中的回车是一个空格
        <br/>是一个 换行 的单标签,和<p>的区别是行间距小了
    -->
    <p>css中的并不等于设备的1px</p>
    <p>
        在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
        素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css
        中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同
        的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的
        移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确
        实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
        苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着
        同样大小的屏幕上，<br />000000像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是
        这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五
        花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
    </p>
    <p>
        还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
        1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
        这点，在文章后面的部分还会讲到。
    </p>

    <!-- 
        加粗：<strong> 和 <b>
        倾斜：<em> 和 <i>
        删除线：<del> 和 <s>
        下划线：<ins> 和 <u>
        一般，前者具有 强调 作用
    -->
    <p>
        <strong>这是加粗的标签strong</strong><br />
        <b>这是加粗标签b</b><br />
    </p>
    <p>
        <em>这是倾斜标签em</em><br />
        <i>这是倾斜标签i</i><br />
    </p>
    <p>
        <del>这是删除线标签del</del><br />
        <s>这是删除线标签s</s><br />
    </p>
    <p>
        <ins>这是下划线标签ins</ins><br />
        <u>这是下划线标签u</u><br />
    </p>

    <!-- 
        img 标签，必须带 src属性 (图片的路径)
        # 相对路径 ./xxx   ../xxx/xxx
        # 绝对路径 c:\\xxx\\xxx  绝对路径包含网络的url 
        @ imgs的其他属性
            alt : 替换文本; 当图片加载失败(路径不对)时，显示给用户一个提示信息
            title : 提示文本; 当鼠标上到鼠标上时,有一个提示信息
            width/height : 控制宽度和高度
            border : 边框 
    -->
    <!-- 相对路径 -->
    <img src="./imgs/picture1.png" alt="这是一张搞笑的图片"><br/>
    <!-- 绝对路径 -->
    <img src="C:\\Users\\86184\\Pictures\\Saved Pictures\\girl.png" title="这是我的电子女友" width="900px" height="500px"><br/>
    <img src="https://www.baidu.com/img/flexible/logo/pc/result@2.png" border="3px">

</body>

</html>